<template>
  <div>
    <el-dialog :visible.sync="open" @close="close" :title="title" width="80%">
      <el-form ref="elForm" :model="formData" size="small" label-width="100px" label-position="left">
        <el-row :gutter="15">
          <el-col :span="6">
            <el-form-item label="事件名称" prop="eventName">
              <el-input v-model="formData.name" placeholder="请输入事件名称" :style="{ width: '100%' }"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="事件类型" prop="eventType">
              <el-select v-model="formData.type" placeholder="请选择事件类型" :style="{ width: '100%' }">
                <el-option v-for="dict in dict.type.usetypecode_dict" :key="dict.value" :label="dict.label" :value="dict.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="事件等级" prop="event_level">
              <el-select v-model="formData.level" placeholder="请选择事件等级" :style="{ width: '100%' }">
                <el-option v-for="dict in dict.type.eventlevelcode_dict" :key="dict.value" :label="dict.label" :value="dict.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="发生时间" prop="eventTime">
              <el-date-picker type="datetime" v-model="formData.findTime" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" :style="{ width: '100%' }" placeholder="请选择发生时间"> </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="6">
            <el-form-item label="发生地" prop="eventLocaltion">
              <el-input v-model="formData.location" placeholder="请选择发生地" :style="{ width: '100%' }"> </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="位置坐标" prop="eventLocaltion">
              <el-input v-model="formData.coordinate" placeholder="请选择位置坐标" :style="{ width: '100%' }" @focus="handleCoordPick"> </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="24">
            <el-form-item label="事故简况" prop="contentTitle">
              <el-input v-model="formData.briefIntroduction" type="textarea" placeholder="请输入事故简况" :style="{ width: '100%' }"> </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="24">
            <el-form-item label="影响范围" prop="impactArea">
              <el-input v-model="formData.coverage" type="textarea" placeholder="请输入影响范围" :style="{ width: '100%' }"> </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="24">
            <el-form-item label="事件起因" prop="surroundings">
              <el-input v-model="formData.initialReason" type="textarea" placeholder="请输入事件起因" :style="{ width: '100%' }"> </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="24">
            <el-form-item label="基本过程" prop="eventCause">
              <el-input v-model="formData.basicProcess" type="textarea" placeholder="请输入基本过程" :style="{ width: '100%' }"> </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="handleConfirm">保存事件信息</el-button>
      </div>
    </el-dialog>
    <MapLocation ref="mapLocationRef" @onPicked="handleCoordPicked" />
  </div>
</template>
<script>
import dialogMixin from "@/mixins/dialogMixin";
import * as RescueApi from "@/api/rescue/rescue";
import MapLocation from "@/views/components/mapTool/MapLocation.vue";

export default {
  name: "PlanEventEditDialog",
  mixins: [dialogMixin],
  dicts: ["usetypecode_dict", "eventlevelcode_dict", "drillcate_dict", "sys_dept_type_dict"],
  components: { MapLocation },
  props: [],
  data() {
    return {
      formData: {
        id: 0,
        name: "",
        type: "",
        level: "",
        location: "",
        findTime: "",
        briefIntroduction: "",
        coverage: "",
        initialReason: "",
        basicProcess: "",
      },
      title: "编辑救援事件信息",
      isedit: false,
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    add(id) {
      this.isedit = false;
      this.formData = {
        savePlanId: id,
        name: "",
        type: "",
        level: "",
        location: "",
        findTime: "",
        briefIntroduction: "",
        coverage: "",
        initialReason: "",
        basicProcess: "",
        coordinate: "",
      };
      this.open = true;
    },
    edit(data) {
      this.isedit = true;
      this.formData = Object.assign({}, data);
      this.open = true;
    },
    handleConfirm() {
      if (this.isedit) {
        RescueApi.updatePlanEvent(this.formData).then(res => {
          if (res.code == 200) {
            // 提交成功
            this.$modal.msgSuccess("救援信息修改成功");
            this.$emit("handleOk");
            this.close();
          } else {
            // 提交失败
            this.$modal.msgError("救援信息修改失败");
          }
        });
      } else {
        RescueApi.savePlanEvent(this.formData).then(res => {
          if (res.code == 200) {
            // 提交成功
            this.$modal.msgSuccess("救援信息保存成功");
            this.$emit("handleOk");
            this.close();
          } else {
            // 提交失败
            this.$modal.msgError("救援信息保存失败");
          }
        });
      }
    },
    handleCoordPick() {
      this.$refs.mapLocationRef.showDialog();
    },
    handleCoordPicked(coord) {
      this.formData.coordinate = coord.join(",");
    },
  },
};
</script>
<style></style>
